Register.render - Code Metrics - JohanLe/me-app - Measure and Improve Code Quality continuously with Scrutinizer

Register.render B
last analyzed 2020-02-12 05:27 UTC

↳ Parent: Register

Complexity

Conditions

Size

Total Lines	63
Code Lines	58

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	58
dl	0
loc	63
rs	8.3745
c	0
b	0
f	0
cc	1

How to fix Long Method

import React from 'react';


class Register extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: "",
            fullname: "",
            birthdate: '',
            errorMessage: false,
        };

    }

    validateYear = (date) => {
        if (isNaN(date)) {
            this.setState({errorMessage: "Not a number"});
            return false
        }
        if (date.length < 4) {
            return false
        }
        this.setState({errorMessage: false});
        return true;
    };
    validateMonth = (date) => {
      //  var year = date.slice(0, 4);
        var month = date.slice(-2);

        if (isNaN(month)) {
            this.setState({errorMessage: "Not a number"});
            return false
        }
        if (date.length < 7) {
            return false
        }
        this.setState({errorMessage: false});
        return true;
    };
    validateDay = (date) => {
       // var year = date.slice(0, 4);
        var month = date.slice(5, 7);
       // var day = date.slice(-2);

        if (isNaN(month)) {
            this.setState({errorMessage: "Not a number"});
            return false
        }

        this.setState({errorMessage: false});
        return true;
    };

    validateBirthdate = (event) => {
        var date = event.target.value;
        /*
         * If erase, do nothing.
         * After 4 & 7 digits, add -
         * Check how many days the months has and se if entered days is OK.
         */
        if (date.length < this.state.birthdate.length) {
            // if erase, do nothing.
        } else if (date.length < 5 && this.validateYear(date)) {
            date += "-";
        } else if (5 < date.length && date.length < 8 && this.validateMonth(date)) {
            date += "-";
        } else if (date.length > 7) {
            this.validateDay(date)
        }
        this.setState({birthdate: date});

    };

    changeHandler = (event) => {
        let nam = event.target.name;
        let val = event.target.value;
        this.setState({[nam]: val});
    };

    handleSubmit = (event) => {
        console.log("HANDLE SUBMIT!");
        event.preventDefault();
        fetch("http://localhost:8333/register", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                fullname: this.state.fullname,
                email: this.state.email,
                password: this.state.password,
                birthdate: this.state.birthdate
            })
        }).then(()=>{
            var url = '/login';
            window.location.replace(url);
        }).catch((e)=>{
            console.log(e);
            console.log("error");
        });
    };

    render() {
        return (
            <div className="register_container">
                <form className="form_register" method="post" onSubmit={this.handleSubmit}>
                    <label className="input_label">
                        Name
                        <input
                            required
                            name="fullname"
                            type="text"
                            onChange={this.changeHandler}
                        />
                    </label>

                    <label className="input_label">
                        Email
                        <input
                            required
                            name="email"
                            type="email"
                            onChange={this.changeHandler}
                        />
                    </label>

                    <label className="input_label">
                        Password
                        <input
                            required
                            name="password"
                            type="password"
                            onChange={this.changeHandler}
                        />
                    </label>

                    <div className="date_picker_container">

                        <label className="input_label">
                            <span>Birthdate </span><span className="small_description_text">e.g. 1900-01-01 (Y-M-D)</span>
                            <input
                                required
                                type="year"
                                name="birthdate"
                                value={this.state.birthdate}
                                onChange={this.validateBirthdate}
                                maxLength="10"
                            />
                            <p className="error_message">{this.state.errorMessage} </p>
                        </label>
                    </div>
                    <div className="terms_and_conditions_text">
                        <label>
                            I accept <a href="/register" onClick={openTermAndConditions} className="form_link"> Terms
                            and Conditions</a>
                        </label>
                        <input name="gdpr" required type="checkbox"/>
                    </div>


                    <input name="register" type="Submit" defaultValue="Register" className="button_submit"/>

                </form>
            </div>
        )
    }
}

/*
 * Return number of days a month has.
 * @ month 01-12 string.
 * @ year string as number

function numberOfDays(month, year) {
    var mon = month % 2;
    if (month === '02') {
        if (calculateLeapYear(year)) {
            return 29;
        }
        return 28;
    } else if (mon === 0 || month === '07') {
        return 31;
    }
    return 30;
}

function calculateLeapYear(year) {
    if (year % 4 === 0) {
        if (year % 400 === 0) {
            return true;
        } else if (year % 100 === 0) {
            return false;
        }
        return true;
    }
    return false;
}


 */



function openTermAndConditions(event) {
    console.log("Term and conditions");
    event.preventDefault();
}

export default Register;

1			import React from 'react';
2
3
4			class Register extends React.Component {
5			constructor(props) {
6			super(props);
7			this.state = {
8			email: "",
9			password: "",
10			fullname: "",
11			birthdate: '',
12			errorMessage: false,
13			};
14
15			}
16
17			validateYear = (date) => {
18			if (isNaN(date)) {
19			this.setState({errorMessage: "Not a number"});
20			return false
21			}
22			if (date.length < 4) {
23			return false
24			}
25			this.setState({errorMessage: false});
26			return true;
27			};
28			validateMonth = (date) => {
29			// var year = date.slice(0, 4);
30			var month = date.slice(-2);
31
32			if (isNaN(month)) {
33			this.setState({errorMessage: "Not a number"});
34			return false
35			}
36			if (date.length < 7) {
37			return false
38			}
39			this.setState({errorMessage: false});
40			return true;
41			};
42			validateDay = (date) => {
43			// var year = date.slice(0, 4);
44			var month = date.slice(5, 7);
45			// var day = date.slice(-2);
46
47			if (isNaN(month)) {
48			this.setState({errorMessage: "Not a number"});
49			return false
50			}
51
52			this.setState({errorMessage: false});
53			return true;
54			};
55
56			validateBirthdate = (event) => {
57			var date = event.target.value;
58			/*
59			* If erase, do nothing.
60			* After 4 & 7 digits, add -
61			* Check how many days the months has and se if entered days is OK.
62			*/
63			if (date.length < this.state.birthdate.length) {
64			// if erase, do nothing.
65			} else if (date.length < 5 && this.validateYear(date)) {
66			date += "-";
67			} else if (5 < date.length && date.length < 8 && this.validateMonth(date)) {
68			date += "-";
69			} else if (date.length > 7) {
70			this.validateDay(date)
71			}
72			this.setState({birthdate: date});
73
74			};
75
76			changeHandler = (event) => {
77			let nam = event.target.name;
78			let val = event.target.value;
79			this.setState({[nam]: val});
80			};
81
82			handleSubmit = (event) => {
83			console.log("HANDLE SUBMIT!");
84			event.preventDefault();
85			fetch("http://localhost:8333/register", {
86			method: "POST",
87			headers: {
88			'Accept': 'application/json',
89			'Content-Type': 'application/json',
90			},
91			body: JSON.stringify({
92			fullname: this.state.fullname,
93			email: this.state.email,
94			password: this.state.password,
95			birthdate: this.state.birthdate
96			})
97			}).then(()=>{
98			var url = '/login';
99			window.location.replace(url);
100			}).catch((e)=>{
101			console.log(e);
102			console.log("error");
103			});
104			};
105
106			render() {
107			return (
108			<div className="register_container">
109			<form className="form_register" method="post" onSubmit={this.handleSubmit}>
110			<label className="input_label">
111			Name
112			<input
113			required
114			name="fullname"
115			type="text"
116			onChange={this.changeHandler}
117			/>
118			</label>
119
120			<label className="input_label">
121			Email
122			<input
123			required
124			name="email"
125			type="email"
126			onChange={this.changeHandler}
127			/>
128			</label>
129
130			<label className="input_label">
131			Password
132			<input
133			required
134			name="password"
135			type="password"
136			onChange={this.changeHandler}
137			/>
138			</label>
139
140			<div className="date_picker_container">
141
142			<label className="input_label">
143			<span>Birthdate </span><span className="small_description_text">e.g. 1900-01-01 (Y-M-D)</span>
144			<input
145			required
146			type="year"
147			name="birthdate"
148			value={this.state.birthdate}
149			onChange={this.validateBirthdate}
150			maxLength="10"
151			/>
152			<p className="error_message">{this.state.errorMessage} </p>
153			</label>
154			</div>
155			<div className="terms_and_conditions_text">
156			<label>
157			I accept <a href="/register" onClick={openTermAndConditions} className="form_link"> Terms
158			and Conditions</a>
159			</label>
160			<input name="gdpr" required type="checkbox"/>
161			</div>
162
163
164			<input name="register" type="Submit" defaultValue="Register" className="button_submit"/>
165
166			</form>
167			</div>
168			)
169			}
170			}
171
172			/*
173			* Return number of days a month has.
174			* @ month 01-12 string.
175			* @ year string as number
176
177			function numberOfDays(month, year) {
178			var mon = month % 2;
179			if (month === '02') {
180			if (calculateLeapYear(year)) {
181			return 29;
182			}
183			return 28;
184			} else if (mon === 0 \|\| month === '07') {
185			return 31;
186			}
187			return 30;
188			}
189
190			function calculateLeapYear(year) {
191			if (year % 4 === 0) {
192			if (year % 400 === 0) {
193			return true;
194			} else if (year % 100 === 0) {
195			return false;
196			}
197			return true;
198			}
199			return false;
200			}
201
202
203			*/
204
205
206
207			function openTermAndConditions(event) {
208			console.log("Term and conditions");
209			event.preventDefault();
210			}
211
212			export default Register;

JohanLe / me-app

Register.render B last analyzed 2020-02-12 05:27 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

Register.render B
last analyzed 2020-02-12 05:27 UTC